<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">沧溟物流TMS</div>
      <el-form :model="param"
               :rules="rules"
               ref="login"
               label-width="0px"
               class="ms-content">
        <el-form-item prop="userName">
          <el-input v-model="param.userName"
                    placeholder="userName">
            <el-button slot="prepend"
                       icon="el-icon-lx-people"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password"
                    placeholder="password"
                    v-model="param.password"
                    @keyup.enter.native="submitForm()">
            <el-button slot="prepend"
                       icon="el-icon-lx-lock"></el-button>
          </el-input>
        </el-form-item>
        <el-checkbox class="remember"
                     v-model="rememberpwd">记住密码</el-checkbox>
        <div class="login-btn">
          <el-button type="primary"
                     @click="submitForm()">登录</el-button>
          <el-button type="primary"
                     @click="register()"
                     style="margin-left:0px !important;">注册</el-button>

        </div>
      </el-form>
    </div>
    <!-- 编辑弹出框 -->
    <el-dialog title="编辑"
               :visible.sync="editVisible"
               width="30%">
      <el-form ref="form"
               :model="form"
               label-width="70px">
        <el-form-item label="名称">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="form.userNumber"></el-input>
        </el-form-item>
        <el-form-item label="传真">
          <el-input v-model="form.fax"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.addressName"></el-input>
        </el-form-item>
        <el-form-item label="邮编">
          <el-input v-model="form.postcode"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="form.contact"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机">
          <el-input v-model="form.contactPhone"></el-input>
        </el-form-item>
        <el-form-item label="客户类型">
          <el-select v-model="form.type"
                     placeholder="客户类型">
            <el-option v-for="item in typeList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业性质">
          <el-select v-model="form.nature"
                     placeholder="企业性质">
            <el-option v-for="item in natureList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业规模">
          <el-select v-model="form.scale"
                     placeholder="企业规模">
            <el-option v-for="item in scaleList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data: function () {
        return {
            natureList: [
                {
                    value: '国企',
                    label: '国企'
                },
                {
                    value: '私企',
                    label: '私企'
                }
            ],
            typeList: [
                {
                    value: '个人',
                    label: '个人'
                },
                {
                    value: '公司',
                    label: '公司'
                }
            ],
            scaleList: [
                {
                    value: '小型企业',
                    label: '小型企业'
                },
                {
                    value: '中型企业',
                    label: '中型企业'
                },
                {
                    value: '大型企业',
                    label: '大型企业'
                }
            ],
            editVisible: false,
            form: {},
            rememberpwd: false,
            param: {
                userName: '',
                password: ''
            },
            rules: {
                userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            }
        };
    },
    methods: {
        submitForm() {
            let url = '';
            if (this.param.userName.indexOf('@Saar') > 0) {
                this.$axios
                    .post('/api/auth/EmployeLogin', { employeName: this.param.userName, password: this.param.password })
                    .then((res) => {
                        if (res.data.code == 200) {
                          sessionStorage.setItem("id",res.data.data.id);
                            this.$router.push('/myHomePage');
                        } else {
                            this.$message({
                                type: 'warning',
                                message: res.data.message
                            });
                        }
                    });
            } else {
                this.$axios.post('/api/auth/UserLogin', this.param).then((res) => {
                    if (res.data.code == 200) {
                        this.$router.push('/myHomePage');
                    } else {
                        this.$message({
                            type: 'warning',
                            message: res.data.message
                        });
                    }
                });
            }
        },
        register() {
            //this.form = {};
            this.editVisible = true;
        },
        saveEdit() {
            this.editVisible = false;
            this.$axios
                .post('/api/user/regist', this.form)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '注册成功！'
                        });
                        this.editFormVisible = false;
                    } else {
                        this.$message({
                            type: 'info',
                            message: res.data.message
                        });
                        this.editFormVisible = false;
                    }
                })
                .catch();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
/* 123123132 */
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/login-bg.jpg);
    background-size: 100%;
}
.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #ddd;
}
.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}
.ms-content {
    padding: 30px 30px;
}
.login-btn {
    text-align: center;
}
.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
}
</style>